<template>
    <el-form-item
        :label="item.label && !item.question ? item.label : ''"
        :prop="item.prop"
    >
        <span slot="label" v-if="item.question">
            <el-tooltip :content="item.question" placement="top">
                <i class="el-icon-question"></i>
            </el-tooltip>
            {{ item.label }}
        </span>
        <el-switch
            v-model="formData[item.prop]"
            :disabled="item.disabled"
            :width="item.width"
            :active-icon-class="item.activeIconClass"
            :inactive-icon-class="item.inactiveIconClass"
            :active-text="item.activeText"
            :inactive-text="item.inactiveText"
            :active-color="item.activeColor"
            :inactive-color="item.inactiveColor"
            :active-value="item.activeValue"
            :inactive-value="item.inactiveValue"
            :validate-event="item.validateEvent"
            @change="handleChange"
        />
    </el-form-item>
</template>
<script>
import mixin from '../mixins/index.js'
export default {
    name: 'df-switch',
    mixins: [mixin],
    props: {
        item: {
            type: Object,
            default() {
                return {
                    /**
                     * 自定义类名
                     * @type string
                     * @value
                     */
                    class: '',
                    /**
                     * 绑定值
                     * @type boolean / string / number
                     * @value 1
                     */
                    switchVal: true,
                    /**
                     * 是否禁用
                     * @type boolean
                     * @value true/false
                     */
                    disabled: false,
                    /**
                     * switch 的宽度（像素）
                     * @type number
                     * @value 40
                     */
                    width: 40,
                    /**
                     * switch 打开时所显示图标的类名，设置此项会忽略 active-text
                     * @type string
                     * @value -
                     */
                    activeIconClass: '',
                    /**
                     * switch 关闭时所显示图标的类名，设置此项会忽略 inactive-text
                     * @type string
                     * @value -
                     */
                    inactiveIconClass: '',
                    /**
                     * switch 打开时的文字描述
                     * @type string
                     * @value '按月付费'
                     */
                    activeText: '按月付费',
                    /**
                     * switch switch 关闭时的文字描述
                     * @type string
                     * @value '按年付费'
                     */
                    inactiveText: '按年付费',
                    /**
                     * switch 打开时的值
                     * @type boolean/string/number
                     * @value
                     */
                    activeValue: '100',
                    /**
                     * switch 关闭时的值
                     * @type boolean/string/number
                     * @value
                     */
                    inactiveValue: '0',
                    /**
                     * switch 打开时的背景色
                     * @type string
                     * @value #409EFF
                     */
                    activeColor: '#13ce66',
                    /**
                     * switch 关闭时的背景色
                     * @type string
                     * @value #C0CCDA
                     */
                    inactiveColor: '#C0CCDA',
                    /**
                     * switch 对应的 name 属性
                     * @type string
                     * @value
                     */
                    name: '',
                    /**
                     * 改变 switch 状态时是否触发表单的校验
                     * @type boolean
                     * @value true/false
                     */
                    validateEvent: true,
                    /**
                     * 输入框关联的label文字
                     * @type String
                     * @value ''
                     */
                    label: ''
                }
            }
        },
        formData: {
            type: Object,
            default() {
                return {}
            }
        }
    },
    methods: {
        /**
         * switch 状态发生变化时的回调函数
         * @param 新状态的值
         *
         */
        handleChange(data) {
            this.dispatch('baseForm', 'onSwitchChange', {
                data: data,
                prop: this.item.prop
            })
        }
    }
}
</script>
